<template>
  <ui-popover
    class="ui-combobox"
    v-model="showPopover"
    trigger="click"
    :class="{'is-active': showPopover}"
    :placement="placement"
  >
    <div
      slot="reference"
      class="ui-combobox__handle"
    >
      <div class="ui-combobox__value" v-if="!isEmpty">
        <slot name="value"></slot>
        <span class="ui-combobox__arrow el-input__icon el-icon-arrow-up"></span>
        <span class="ui-combobox__clear el-input__icon el-icon-circle-close" title="清除" @click.stop="handleClearClick"></span>
      </div>
      <template v-else>
        <span class="ui-combobox__placeholder">{{ placeholder }}</span>
        <span class="ui-combobox__arrow el-input__icon el-icon-arrow-up"></span>
      </template>
      <input
        class="ui-combobox__input"
        type="text"
        @focus="handleInputFocus"
      >
    </div>
    <div class="ui-combobox__main">
      <slot :visible="showPopover"></slot>
    </div>
  </ui-popover>
</template>
<script>
export default {
  name: 'UiCombobox',
  props: {
    value: {
      type: [String, Object, Number, Boolean, Array],
      default: 1
    },
    placeholder: {
      type: String,
      default: '选择'
    },
    filterable: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String
    }
  },
  data () {
    return {
      isFocus: false,
      showPopover: false
    }
  },
  computed: {
    isEmpty () {
      return this.value === null || this.value === undefined || this.value === '' || (Array.isArray(this.value) && this.value.length === 0)
    }
  },
  methods: {
    handleInputFocus () {
      this.isFocus = true
    },
    handleClearClick () {
      this.$emit('input', null)
    },
    close () {
      this.showPopover = false
    },
    open () {
      this.showPopover = true
    }
  }
}
</script>
<style lang="less">
.ui-combobox {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  &.is-active {
    .ui-combobox__handle{
      border-color: #3385FF;
    }
    .ui-combobox__arrow{
      transform: translateY(-50%) rotate(0deg);
    }
  }
  &:not(.is-disabled):hover {
    .ui-combobox__handle{
      border-color: #C0C4CC;
    }
    .ui-combobox__value{
      .ui-combobox__arrow{
        display: none;
      }
      .ui-combobox__clear{
        display: block;
      }
    }
  }
}
.ui-combobox__handle{
  display: block;
  min-height: 26px;
  line-height: 26px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 2px 30px 2px 12px;
  position: relative;
  transition: all .25s;
  cursor: pointer;
}
.ui-combobox__placeholder{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c3c6ce;
  z-index: 3;
  height: 24px;
  line-height: 24px;
}
.ui-combobox__input{
  vertical-align: top;
  height: 1px;
  display: none;
  border: 0;
  padding: 0;
  outline: none;
}
.ui-combobox__arrow,
.ui-combobox__clear{
  position: absolute;
  top: 50%;
  right: 5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  transform: translateY(-50%) rotate(180deg);
  color: #c0c4cc;
  transition: all .25s;
}
.ui-combobox__clear{
  display: none;
  &:hover {
    color: #333;
  }
}
</style>
